import React, { useState, useEffect } from 'react';
import CheckButton from './CheckButton'
import { Tooltip } from 'antd'
import { RightOutlined } from '@ant-design/icons'
import styles from './index.module.scss'

const CheckButtonGroup = (props) => {
  const { options, step1Val } = props;
  const {apply_scene, reinforce_type } = step1Val  //加固方式
  const [value, setValue] = useState({});
  const [visibleList, setVisibleList] = useState(options) //可见选项
  const [load, setLoad] = useState(false)  //默认折叠
  
  useEffect(() => {
    setValue({})
  }, [reinforce_type,apply_scene])

  useEffect(()=>{
    setVisibleList(options.slice(0, 10))
    setLoad(false)
  },[options])

  useEffect(() => {
    if(!load){
      setVisibleList(options.slice(0, 10))
    }else{
      setVisibleList(options)
    }
  }, [load])

  const handleChange = (index, selected) => {
    const newValue = value;
    if (!newValue[index]) {
      newValue[index] = visibleList[index].method_name;

      // 单选
      if (reinforce_type == 1) {
        Object.keys(options).map(key => {
          if (key != index) {
            newValue[key] = ''
          }
        })
      }
    } else {
      newValue[index] = '';
    }

    setValue(newValue);
    const propsValue = [];
    Object.keys(newValue).forEach((key) => {
      if (newValue[key]) {
        propsValue.push(newValue[key]);
      }
    })
    props.onChange?.(propsValue);
  };


  return (
    <div>
      <div className={styles.container}>
        {visibleList.map((op, index) => (
          <CheckButton key={index} onClick={handleChange} index={index} disabled={op.disabled} value={value}>
            <p className={styles.name}>{op.name}</p>
            <Tooltip title={op.desc}> <p className={styles.desc}>{op.desc}</p></Tooltip>
          </CheckButton>
        ))}
      </div>
      {options?.length>10
      ?<div className={styles.loadMore} onClick={() => setLoad(!load)}>
        <span>{load ? '折叠' : '查看更多'}</span>
        <RightOutlined /></div>
        :null}
    </div>
  );
};

export default CheckButtonGroup